<template>
  <div class="cw-echarts-threeone" :id="name"></div>
</template>


<script>
import echarts from "echarts";
export default {
  
  data() {
    return {
      name: "cw-threeone"
    };
  },
  created() {
    this.$nextTick(function() {
      // 需要修改 twotwo
      this.drow(this.name);
    });
  },
 
  methods: {
   drow(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          text: "蔬菜种植面积统计（亩）",
          x: "center",
          textStyle: {
            color: "rgb(255, 255, 255)",
            fontSize: 18
          }
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [
            "韭菜",
            "芹菜",
            "田七",
            "白凤菜",
            "紫背天葵",
            "生菜",
            "甜菜",
            "香菜"
          ],
          x: "center",
          y: "bottom",
          itemWidth: 8,
          itemHeight: 8,
          padding: 1,
          itemGap: 4,
          textStyle: {
            color: "rgb(255, 255, 255)",
            fontSize: 13
          }
        },
        toolbox: {
          show: false,
          feature: {
            mark: {
              show: false
            },
            dataView: {
              show: false,
              readOnly: true
            },
            magicType: {
              show: false,
              type: ["line", "bar"]
            },
            restore: {
              show: false
            },
            saveAsImage: {
              show: false
            }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: ["2016年", "2017年", "2018年", "2019年"],
            splitLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: "rgb(255, 255, 255)",
                fontSize: 12
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 6,
            splitNumber: 6,
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: "rgb(255, 255, 255)"
              }
            }
          }
        ],
        series: [
          {
            name: "韭菜",
            type: "bar",
            data: [4.3, 2.5, 3.5, 4.5]
          },
          {
            name: "芹菜",
            type: "bar",
            data: [2.5, 4.4, 1.8, 2.8]
          },
          {
            type: "bar",
            name: "田七",
            data: [2, 2, 3, 5]
          },
          {
            type: "bar",
            name: "白凤菜",
            data: [2, 5, 2, 4]
          },
          {
            type: "bar",
            name: "紫背天葵",
            data: [3, 5, 1, 4]
          },
          {
            type: "bar",
            name: "生菜",
            data: [3, 4, 4, 3]
          },
          {
            type: "bar",
            name: "甜菜",
            data: [1, 3, 5, 4]
          },
          {
            type: "bar",
            name: "香菜",
            data: [2, 5, 4, 3]
          },
        ],
        grid: {
          y: 70,
          height: 230
        }
      });
    }
  }

};
</script>

<style lang="scss">
// 需要修改 .xz-echarts-xx
.cw-echarts-threeone {
  height: 380px;
  width: 100%;
}
</style>
